<template>
    <el-row class="header-row" justify="space-evenly">
        <el-col :span="8">
            <div class="left" v-if="tabName === 'padding'">
                {{ nowTime }}
            </div>
            <div class="left" v-if="tabName === 'finish'">
                <el-tag type="success">已完成</el-tag>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="middle">{{ paperName }}</div>
        </el-col>
        <el-col :span="8">
            <div class="right">
                <el-button :icon="DataAnalysis" type="success" v-if="tabName === 'finish' && active === 'table' && hasPermission('STATISTICS')" round size="default" @click="onStatistics" class="animate__animated animate__flipInX">统计</el-button>
                <el-button :icon="Back" round size="default" @click="onBack">返回</el-button>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { dayjs } from "element-plus";
import { DataAnalysis, Back } from "@element-plus/icons-vue";
import { hasPermission } from "@/utils/common";

//父传子
interface Props {
    paperName?: string | null;
    tabName?: string | null;
    active?: string | null;
}
const props = withDefaults(defineProps<Props>(), {
    paperName: null,
    tabName: null,
    active: null,
});

//时间
const nowTime = ref<string>("");
const intervalId = ref<number | null>(null);

//初始化时间
const initTime = () => (intervalId.value = setInterval(() => (nowTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss")), 1000));

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["on-back", "on-statistics"]);

//返回按钮点击事件
const onBack = () => emit("on-back");

//统计按钮点击事件
const onStatistics = () => emit("on-statistics");

onMounted(() => {
    if (props.tabName === "padding") {
        initTime();
    }
});
onBeforeUnmount(() => clearInterval(intervalId.value!));
</script>

<style scoped lang="less">
.header-row {
    .left {
        font-weight: bold;
        padding-left: 10px;
    }
    .middle {
        text-align: center;
        font-size: large;
        font-weight: bold;
    }
    .right {
        float: right;
        margin-right: 5px;
    }
}
</style>
